<template>
  <div class="ddns">
    <h1><Strong>DDNS Core Config</Strong></h1>
    <div class="form">
      <!-- task name -->
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">Task Name</label>
        <input
          v-model="DDNSConfig.taskName"
          class="mdui-textfield-input"
          type="text"
        />
      </div>
      <!-- domain Name -->
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">域名</label>
        <input
          v-model="DDNSConfig.domainName"
          class="mdui-textfield-input"
          type="text"
        />
      </div>
      <!-- accessKey -->
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">accessKeyId</label>
        <input
          v-model="DDNSConfig.accessKeyId"
          class="mdui-textfield-input"
          type="text"
        />
      </div>
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">accessSecret</label>
        <input
          v-model="DDNSConfig.accessSecret"
          class="mdui-textfield-input"
          type="text"
        />
      </div>
      <!-- rr List -->
      <div class="mdui-textfield">
        <label class="mdui-textfield-label">RR List</label>
        <input
          v-model="DDNSConfig.rrList"
          placeholder="请输入RR类型，多个RR请用英文分号(;)隔开!"
          class="mdui-textfield-input"
          type="text"
        />
      </div>
      <!-- btn -->
      <div class="mdui-col">
        <button @click="setConf()" class="mdui-btn mdui-btn-block mdui-ripple">
          提交
        </button>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="dividing mdui-divider mdui-color-indigo-500"></div>
    <!-- ddns core msg -->
    <div class="state-card">
      <!-- <div class="btn-card">
        <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-ripple">Button</button>
        <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-ripple">Button</button>
      </div> -->
      <div class="btn-card mdui-row-xs-2">
        <div class="mdui-col">
          <button
            @click="setState('start')"
            class="run mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
          >
            运行
          </button>
        </div>
        <div class="mdui-col">
          <button
            @click="setState('stop')"
            class="danger mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple"
          >
            停止
          </button>
        </div>
      </div>
      <div class="ddns-msg-card">
        <h3>
          <strong>DDNS运行状态:</strong
          ><span class="info">{{ DDNSConfig.state }}</span>
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
import mdui from 'mdui'
import apiConfig from '../../api/apiConfig'
export default {
  data () {
    return {
      DDNSConfig: {
        taskName: '',
        domainName: '',
        accessKeyId: '',
        accessSecret: '',
        rrList: '',
        state: 'loadding...'
      }
    }
  },
  methods: {
    async setConf () {
      // console.log(this.DDNSConfig.taskName, typeof this.DDNSConfig.taskName)
      const {
        taskName,
        accessKeyId,
        accessSecret,
        domainName,
        rrList
      } = this.DDNSConfig
      // console.log(taskName, accessKeyId, accessSecret, domainName, rrList)
      if (
        taskName.length < 1 ||
        accessKeyId.length < 1 ||
        accessSecret.length < 1 ||
        domainName.length < 1 ||
        rrList.length < 1
      ) {
        mdui.snackbar({
          message: '缺少参数',
          position: 'top',
          timeout: 2000
        })
        return
      }
      // // 格式化rr List
      const rr = rrList.split(';')
      const conf = apiConfig.admin.ddns.setConf(
        accessKeyId,
        accessSecret,
        domainName,
        rr
      )

      try {
        const resp = await this.$axios(conf)
        // console.log(resp)
        mdui.snackbar({
          message: resp.data.message,
          position: 'top',
          timeout: 2000
        })
      } catch (error) {
        mdui.snackbar({
          message: '提交失败',
          position: 'top',
          timeout: 2000
        })
      }
    },
    async setState (state = 'state') {
      const conf = apiConfig.admin.ddns.getInfo(state)
      try {
        const resp = await this.$axios(conf)
        mdui.snackbar({
          message: resp.data.message,
          position: 'top',
          timeout: 2000
        })
        this.getState()
      } catch (error) {
        console.log(error)
      }
    },
    async getState () {
      try {
        const conf = apiConfig.admin.ddns.getInfo()
        const data = await this.$axios(conf)
        this.DDNSConfig.state = data.data.message
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.getState()
    })
  }
}
</script>

<style lang="less" scoped>
.ddns {
  font-family: Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 80vw;
  max-width: 560px;
  margin-bottom: 35px;
  h1 {
    text-align: center;
  }
  .dividing {
    margin: 15px 0;
  }
}
.form {
  width: 100%;
  button {
    margin: 15px 0;
    background: #0285ff;
    color: #ffffff;
  }
}
.state-card {
  margin-top: 10px;
  .ddns-msg-card {
    strong {
      // color: #;
      font-size: 24px;
    }
    span {
      padding: 0 15px;
      text-align: center;
      font-size: 16px;
    }
  }
}
.run {
  background: #5cb85c;
}
.danger {
  background: #d9534f;
}
.info {
  color: #5bc0de;
}
</style>
